/* eslint-disable no-unused-vars */
import React, { useEffect, useImperativeHandle, useState, forwardRef, useContext } from 'react';
import { Form, Input, Button, Select, message, Row, Col } from 'antd';
import DesignUtil from './DesignUtil';
import ApiHelper from '../api';
import DesignContext from '../designContext';
import ControlErrorBoundary from './ControlErrorBoundary';

const { Option } = Select;
/**
 * 绑定选择器组件
 */
const BindSelect = forwardRef((props, ref) => {
  const { child, data, field, defaultValue } = props;
  const bindFieldName = `${field}Bind`;
  const [edit, setEdit] = useState(false);
  const { dataSourceScripts, loadDataSource, dataSourceResults, refreash } = useContext(DesignContext);

  useImperativeHandle(ref, () => ({}));

  useEffect(() => {
    setEdit(data[bindFieldName] != null);
  }, []);
  // 解决同一面板,不同控件切换状态问题
  useEffect(() => {
    setEdit(data[bindFieldName] != null);
  }, [data.key]);

  // const refreash = (scriptName) => {
  //   const find = dataSourceScripts.find((c) => c.name === scriptName);
  //   if (find != null) {
  //     loadDataSource([find], null, null);
  //   }
  // };

  const setValue = (scriptname) => {
    if (scriptname == null) {
      data[bindFieldName] = null;
      data[field] = defaultValue;
    } else if (
      Object.prototype.toString.call(defaultValue) === Object.prototype.toString.call(dataSourceResults.get(scriptname))
    ) {
      data[bindFieldName] = scriptname;
      data[field] = dataSourceResults.get(scriptname);
      message.info(`数据源${scriptname}绑定成功`);
    } else {
      message.error(`数据源${scriptname}类型不匹配,绑定失败!`);
      setValue(null);
    }
    refreash();
  };

  const render = () => {
    if (!edit) {
      return (
        <>
          <Row>
            <Col span={18}>
              <ControlErrorBoundary>{child()}</ControlErrorBoundary>
            </Col>
            <Col span={6}>
              <Button
                onClick={() => {
                  setEdit(true);
                  setValue(null);
                }}
              >
                绑定数据源
              </Button>
            </Col>
          </Row>
        </>
      );
    } else {
      return (
        <Row>
          <Col span={18}>
            <Select
              value={data[bindFieldName] || ''}
              onChange={(e) => {
                setValue(e);
                // refreash(e);
              }}
            >
              {dataSourceScripts.map((script, index) => {
                return (
                  <Option key={script.key} value={script.name}>
                    {script.name}
                  </Option>
                );
              })}
            </Select>
          </Col>
          <Col span={6}>
            <Button
              onClick={() => {
                setEdit(false);
                setValue(null);
              }}
            >
              取消绑定
            </Button>
          </Col>
        </Row>
      );
    }
  };

  return <>{render()}</>;
});

export default BindSelect;
